<template>
	<view v-if="visible" class="modal-overlay" @click.self="handleClose">
		<view class="modal-container">
			<view class="title">修改设备</view>
			<view class="modal-content">
				<view class="input-group">
					<text class="input-label">设备名(最大为六个字符):</text>
					<input v-model="limitedDeviceName" class="input-field" placeholder="请输入设备名" />
				</view>
				<view class="input-group">
					<text class="input-label">设备类型:</text>
					<picker mode="selector" :range="deviceTypes" @change="handleDeviceTypeChange">
						<view class="picker">{{ tempDeviceType }}</view>
					</picker>
				</view>
				<view class="input-group">
					<text class="input-label">归属房间:</text>
					<picker mode="selector" :range="roomNames" @change="handleRoomChange">
						<view class="picker">{{ tempRoomName }}</view>
					</picker>
				</view>
			</view>
			<view class="modal-actions">
				<button class="modal-button" @click="handleClose">取消</button>
				<button class="modal-button" @click="handleConfirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getRoom } from '@/api/room/room.js';
import { updateDevice } from '@/api/device/device.js';

export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		device: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			tempDeviceName: '',
			tempDeviceType: '',
			tempRoomName: '',
			tempRoomId: '',
			deviceTypes: ['时钟', '冰箱', '床', '风扇', '马桶', '游戏手柄', '台灯', '手机', '电视', '锅', '插座', '插头', '空调', '灯泡', '其他'],
			rooms: [], // Store room objects with { roomId, roomName }
			roomNames: [] // Store just the room names for picker
		};
	},
	  computed: {
	    limitedDeviceName: {
	      get() {
	        // 限制字符长度为6
	        return this.tempDeviceName.length <= 6 ? this.tempDeviceName : this.tempDeviceName.slice(0, 6);
	      },
	      set(value) {
	        // 赋值时截断超长字符
	        this.tempDeviceName = value.length <= 6 ? value : value.slice(0, 6);
	      }
	    }
	  },
	created() {
		this.loadData();
	},
	watch: {
		visible(newVal) {
			if (newVal) {
				this.initializeData();
			}
		}
	},
	mounted() {
			console.log('Received props:', this.device);
		},
	methods: {
		loadData() {
			this.getRoomList().then(() => {
				this.initializeData();
			});
		},
		initializeData() {
			if (this.device) {
				this.tempDeviceName = this.device.deviceName || '';
				this.tempDeviceType = this.device.deviceTypes || '';
				this.tempRoomId = this.device.roomId || '';
				this.tempstatus = this.device.status || '';
				// 查找 roomName
				const room = this.rooms.find(room => room.roomId === this.tempRoomId);
				this.tempRoomName = room ? room.roomName : '';
			}
			// console.log("212121", room);
		},
		getRoomList() {
			return getRoom().then(res => {
				
				this.rooms = res.rows.map(room => ({
					roomId: room.roomId,
					roomName: room.roomName
				}));console.log("this.rooms",this.rooms);
				this.roomNames = this.rooms.map(room => room.roomName);
			});
			
		},
		handleDeviceTypeChange(e) {
			this.tempDeviceType = this.deviceTypes[e.detail.value];
		},
		handleRoomChange(e) {
			const selectedRoom = this.rooms[e.detail.value];
			this.tempRoomName = selectedRoom.roomName;
			this.tempRoomId = selectedRoom.roomId;
			console.log("cecece",selectedRoom);
		},
		handleClose() {
			this.$emit('close');
		},
		handleConfirm() {
			if (!this.tempDeviceName) {
			  uni.showToast({
			    title: '请填写所有必填项',
			    icon: 'none'
			  });
			  return;
			}
			const updatedDevice = {
				id: this.device.id,
				deviceName: this.tempDeviceName,
				deviceTypes: this.tempDeviceType,
				roomId: this.tempRoomId,
				status:this.tempstatus
			};
			
			updateDevice(updatedDevice).then(() => {
				this.$emit('confirm', updatedDevice);
				this.handleClose();
			}).catch(error => {
				console.error('Error updating device:', error);
			});
		}
	}
};
</script>

<style scoped>
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-container {
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	width: 77%;
}

.modal-content {
	/* margin-bottom: 20px; */
}

.input-group {
	margin-bottom: 19rpx;
}

.input-label {
	padding-bottom: 25rpx;
	/* margin-bottom: 9rpx; */
}

.input-field {
	width: 90%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 92rpx;
}

.picker {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	height: 82rpx;
}

.modal-actions {
	display: flex;
	justify-content: space-between;
}

.modal-button {
	margin-top: 12px;
	padding: 3px 18px;
	border: none;
	background-color: #5175e9;
	color: white;
	border-radius: 5px;
	cursor: pointer;
}

.modal-button:first-child {
	background-color: #ccc;
}

.modal-button:hover {
	opacity: 0.8;
}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	margin-left: 182rpx;
	padding-bottom: 12px;
}
</style>
